<style lang="scss" scoped>
.serviceMenu {
    display: flex;
    justify-content: space-between;
}
.choose:hover{
    background-color: #6dadf1;
    color: #fff
}
.ivu-menu-item-active {
    color: white !important;
    background: #2d8cf0 !important;
}
</style>
<template>
	<div>
        <div style="display: flex; align-items: stretch;" class="productService">
            <div style="display: flex; flex-direction: column; margin-right: 10px; width: 240px;">
                <div style="height: 55px; padding: 0 10px; margin-bottom: 10px; font-size: 22px; background-color: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-self: start; border-radius: 8px;">
                    <!-- <Icon type="ios-add" style="margin-right: 10px; font-weight: bolder; padding-top: 7px; cursor: pointer;" @click="createService"></Icon> -->
                    <span>物流产品</span>
                    <a style="font-size: 10px; padding-top: 7px; cursor: pointer; margin-left: 10px;" @click="createService">添加</a>
                </div>
                <div style="background-color: #fff; border: 1px solid #ddd; font-size: 16px; max-height: 850px; overflow:hidden auto; flex: 1; margin-bottom: 77px">
                    <Menu :active-name="0" @on-select="selectProduct">
                        <MenuItem :name="0" class="choose">
                            全部物流产品
                        </MenuItem>
                        <MenuItem v-for="item in productList" :key="item.id" :name="item.id" class="choose serviceMenu">
                            <div>{{item.carrierGroupCode}}{{ item.active == 0 ? '（失效）' : '' }}</div>
                            <div>
                                <Icon v-show="selectedProduct.id == item.id && item.organizationId !== 0 && item.active == 1" style="font-size: 20px; font-weight: bolder; cursor: pointer;" type="ios-close" @click="deleteService(item.id)" />
                                <Icon v-show="selectedProduct.id == item.id && item.organizationId !== 0 && item.active == 0" style="font-size: 20px; font-weight: bolder; cursor: pointer;" type="ios-checkmark" @click="deleteService(item.id)" />
                            </div>
                        </MenuItem>
                    </Menu>
                </div>
            </div>
            <div style="flex: 1; overflow: auto hidden; padding-bottom: 30px">
                <!-- <comListWLC v-if="selectedProduct.type == 1" :selectedProduct="selectedProduct" :productList="productList"></comListWLC> -->
                <comListAll :selectedProduct="selectedProduct" :productList="productList"></comListAll>
            </div>
        </div>
        <compModal v-model="modalProps.show" v-bind="modalProps" @on-close="closemodalprops">
            <component ref="cusref" :is="modalProps.component"  v-bind="modalProps" v-on="modalProps.on"></component>
        </compModal>
		<Spin v-if="loading" fix></Spin>
	</div>
</template>

<script>
import { HttpCarrierProductList, HttpActiveCarrierProduct } from '@/service/api/views';
import { mapGetters } from "vuex";
import comListAll from './indexall'
import comAddServiceCode from './addservicecode.vue'

export default {
    components: {
        comListAll,
        comAddServiceCode
    },
	data() {
		return {
            loading: false,
            productList: [],
            selectedProduct: {id: '', type: 0},
            modalProps:{
                show: false,
            },
		};
	},
	created() {
        this.getDetail();
	},
	computed: {
         ...mapGetters('dictionary',['getSysAllList']),
	},
	methods: {
        closemodalprops(){
            this.modalProps = {};
            this.$emit('on-openCloseable');
        },
        createService() {
            this.$emit('on-closeCloseable');
            this.modalProps = {
                show: true,
                alert: "primary",
                title: "添加服务代码",
                component: "comAddServiceCode",
                width: 520,
                showFooter: false,
                on:{
                    'on-success':()=>{
                        this.getDetail();
                        this.closemodalprops()
                    },
                }
            };
        },
        deleteService(id){
            this.modalProps = {
                title: '改变物流产品状态',
                showDesc: true,
                alert: 'primary',
                show: true,
                params: {
                    id: id
                },
                ajaxRequest: HttpActiveCarrierProduct,
                callback:(res)=>{
                    this.getDetail();
                    this.$Message.success(res.message);
                    this.closemodalprops();
                }
            };
        },
        selectProduct(val){
            this.selectedProduct = this.productList.find(item=>item.id == val) || {id: '', type: 0};
        },
		getDetail() {
			this.loading = true;
			HttpCarrierProductList().then(res => {
                this.productList = res.data;
                this.loading = false;
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			});
		},
	}
};
</script>
